<template>
    <div>
        <div class="search-term">
            <el-form :inline="true" :model="searchInfo" class="demo-form-inline">
                <el-form-item>
                    <el-input
                            placeholder="请输入姓名"
                            v-model="searchInfo.teacherName"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            placeholder="请输入手机号"
                            v-model="searchInfo.mobile"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item
                        v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2||searchInfo.currentRoleId===3">
                    <el-input
                            placeholder="请输入所属机构名称"
                            v-model="searchInfo.createName"
                            clearable
                            size="small"
                    ></el-input>
                </el-form-item>
                <el-form-item prop="status"
                              v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2||searchInfo.currentRoleId===3">
                    <el-select
                            v-model="searchInfo.auditStatus"
                            placeholder="请选择审批状态"
                            clearable
                            size="small"
                    >
                        <el-option
                                v-for="item in auditOptions"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button @click="onSubmit" type="primary" size="small"
                    >搜 索
                    </el-button
                    >
                </el-form-item>
                <el-form-item>
                    <el-button @click="openDialog('add',false)" size="small"
                               v-if="btns&&btns.includes('add')&&(searchInfo.currentRoleId===3||searchInfo.currentRoleId===4)">
                        新 增
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="importInfo()" size="small"
                               v-if="btns&&btns.includes('add')&&(searchInfo.currentRoleId===3||searchInfo.currentRoleId===4)">
                        导 入
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-table :data="tableData" style="width: 100%;margin-bottom: 10px;" border>
            <el-table-column prop="name" label="姓名" align="center">
            </el-table-column>
            <el-table-column prop="sex" label="性别" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.sex == 1 ? "男" : "女" }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="mobile" label="手机号" align="center">
            </el-table-column>
            <el-table-column prop="auditStatus" label="审核状态" align="center" v-if="searchInfo.currentRoleId!==4">
                <template slot-scope="scope">
                    <span :class="fliterColor(scope.row.auditStatus)">{{filterStatus(scope.row.auditStatus)}}</span>
                    <span class="danger" style="cursor:pointer" v-if="scope.row.auditStatus===2"
                          @click="showFailReason(scope.row.teacherId)"> 查看原因</span>
                </template>
            </el-table-column>
            <el-table-column prop="createName" label="所属机构" align="center">
            </el-table-column>

            <el-table-column fixed="right" label="操作" align="center" width="280px"
                             v-if="searchInfo.currentRoleId===1||searchInfo.currentRoleId===2">
                <template slot-scope="scope">
                    <el-button
                            @click="editArea(scope.row,true)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="btns.includes('view')"
                    >查看
                    </el-button>
                    <el-button
                            @click="openAudit(scope.row)"
                            size="small"
                            type="warning"
                            icon="el-icon-document"
                            v-if="(btns&&btns.includes('audit'))&&scope.row.auditStatus === 1"
                    >审核
                    </el-button
                    >
                    <el-button
                            @click="editArea(scope.row,false)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))"
                    >编辑
                    </el-button
                    >
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" align="center" width="370px"
                             v-if="searchInfo.currentRoleId===3||searchInfo.currentRoleId===4">
                <template slot-scope="scope">
                    <el-button
                            @click="editArea(scope.row,true)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="btns.includes('view')"
                    >查看
                    </el-button
                    >
                    <el-button
                            @click="editArea(scope.row,false)"
                            size="small"
                            type="primary"
                            icon="el-icon-edit"
                            v-if="(btns&&btns.includes('edit'))
                                       &&(scope.row.auditStatus === 0||scope.row.auditStatus === 2)"
                    >编辑
                    </el-button
                    >
                    <el-button
                            @click="commitAudit(scope.row)"
                            size="small"
                            type="warning"
                            icon="el-icon-document"
                            v-if="(btns&&btns.includes('commitAudit'))
                                        &&(scope.row.auditStatus === 0||scope.row.auditStatus === 2)"
                    >提交审核
                    </el-button
                    >
                    <el-button
                            @click="deleteAreas(scope.row)"
                            size="small"
                            type="danger"
                            icon="el-icon-delete"
                            v-if="(btns&&btns.includes('delete'))&&(scope.row.auditStatus !== 1&&scope.row.auditStatus !== 5)"
                    >删除
                    </el-button
                    >
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                :current-page="currPage"
                :page-size="pageSize"
                :page-sizes="[10, 20, 30, 50, 100]"
                :style="{ float: 'right', padding: '20px' }"
                :total="totalCount"
                @current-change="handlepageChange"
                @size-change="handleSizeChange"
                layout="total, sizes, prev, pager, next, jumper"
        ></el-pagination>

        <!--导入-->
        <el-dialog
                :before-close="closeImportDialog"
                title="教师导入"
                :visible.sync="dialogImportVisible"
                class="dialogs"
                width="380px"
        >
            <div style="float: left;">
                <el-upload
                        class="upload-demo"
                        :action="`${path}/api-user/teacher/import`"
                        :limit="1"
                        :on-exceed="handleExceed"
                        :before-upload="checkImportFile"
                        :on-error="uploadImportError"
                        :on-success="uploadImportSuccess"
                        :headers="{ Authorization: token,clientType: 'webApp' }"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove">
                    <el-button size="small" type="primary">选择导入文件</el-button>
                </el-upload>
            </div>
            <div style="float: left;margin-top: 8px; margin-left: 8px;">
                <el-link href="https://istudy-prod.oss-cn-hangzhou.aliyuncs.com/excel/template/教师导入.xlsx">下载模板<i class="el-icon-download el-icon--right"></i>
                </el-link>
            </div>
            <div style="clear: left;margin-top: 20px;text-align: center;" slot="footer">
                <el-button @click="closeImportDialog" size="small">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 新增编辑 -->
        <el-dialog
                :before-close="closeDialog"
                :title="dialogTitle"
                :visible.sync="dialogFormVisible"
                class="dialogs"
        >
            <el-form
                    :model="form"
                    :inline="true"
                    :rules="rules"
                    label-width="100px"
                    ref="areaForm"
            >
                <el-divider content-position="left">基本信息</el-divider>
                <el-form-item label="姓名" prop="name">
                    <el-input
                            autocomplete="off"
                            v-model="form.name"
                            size="small"
                            placeholder="请输入姓名"
                            clearable
                            :disabled="isFlag"
                    ></el-input>

                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="form.sex" :disabled="isFlag">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号" prop="mobile">
                    <el-input
                            autocomplete="off"
                            v-model="form.mobile"
                            size="small"
                            placeholder="请输入手机号"
                            clearable
                            :disabled="isFlag"
                    ></el-input>
                </el-form-item>
                <el-form-item label="所属机构" prop="createName">
                    <el-input
                            autocomplete="off"
                            v-model="form.createName"
                            size="small"
                            clearable
                            :disabled="true"
                    ></el-input>
                </el-form-item>
                <el-divider content-position="left">资质信息</el-divider>
                <el-form-item label="身份证" prop="idCardUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="!isFlag"
                            class="avatar-uploader"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 2)"
                            :before-upload="checkFile"
                            :action="`${path}/api-system/file/upload/teacher`"
                            list-type="picture-card"
                            :headers="{ Authorization: token,clientType: 'webApp' }"
                            :on-error="uploadError"
                            :file-list="idCardUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 2)">

                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            v-else-if="idCardUrls.length===0"
                            :action="`${path}/api-system/file/upload/teacher`"
                            :disabled="true"
                            class="avatar-uploader"
                            list-type="picture-card"
                            :on-error="uploadError"
                            :file-list="idCardUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 2)">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="idCardUrls" v-for="item in idCardUrls" :src="item.url" class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>
                <el-form-item label="教师资格证" prop="certificationUrl" class="pics">
                    <!--编辑情况-->
                    <el-upload
                            v-if="!isFlag"
                            class="avatar-uploader"
                            :on-remove="(file, fileList) => handleRemove(file, fileList, 3)"
                            :before-upload="checkFile"
                            :action="`${path}/api-system/file/upload/teacher`"
                            list-type="picture-card"
                            :headers="{ Authorization: token,clientType: 'webApp' }"
                            :on-error="uploadError"
                            :file-list="certificationUrls"
                            :on-success="(response, file, fileList) => uploadSuccess(response, file, fileList, 3)">

                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--查看无数据情况-->
                    <el-upload
                            v-else-if="certificationUrls.length===0"
                            :action="`${path}/api-system/file/upload/teacher`"
                            :disabled="true"
                            class="avatar-uploader"
                            list-type="picture-card"
                            :on-error="uploadError"
                            :file-list="certificationUrls">
                        <i class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                    <!--查看有数据情况-->
                    <div v-else>
                        <img v-if="certificationUrls" v-for="item in certificationUrls" :src="item.url" class="avatar"
                             style="width: 148px;height:148px;margin-right: 10px;"/>
                    </div>
                </el-form-item>

            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeDialog" size="small">取 消</el-button>
                <el-button @click="enterDialog" type="primary" size="small" v-if="!isFlag && saveFlag"
                >保 存
                </el-button
                >
            </div>
        </el-dialog>

        <!--审批弹出框-->
        <el-dialog title="审批信息" :visible.sync="auditDialogFormVisible">
            <el-form :model="auditForm" ref="auditForm">
                <el-form-item label="审批意见" prop="remarks" class="pics">
                    <el-input
                            type="textarea"
                            :rows="3"
                            placeholder="请输入审批意见"
                            v-model="auditForm.remarks">
                    </el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeAudiDialog" size="small">取 消</el-button>
                <el-button @click="enterAudiDialog(2)" type="danger" size="small">审核不通过</el-button>
                <el-button @click="enterAudiDialog(3)" type="primary" size="small ">审核通过</el-button>
            </div>
        </el-dialog>

        <!--审批失败弹出框-->
        <el-dialog title="审批失败原因" :visible.sync="auditMessageVisible" class="dialogs">
            <span>{{failMessage}}</span>
        </el-dialog>
    </div>
</template>

<script>
    // 获取列表内容封装在mixins内部  getTableData方法 初始化已封装完成 条件搜索时候 请把条件安好后台定制的结构体字段 放到 this.searchInfo 中即可实现条件搜索
    import {mapGetters} from "vuex";
    import {
        addteacher,
        auditTeacher,
        deleteteacher,
        editteacher,
        enableTeacher,
        getAuditMessage,
        teacherDetail,
        teacherList
    } from "@/api/teacher";
    import infoList from "@/components/mixins/infoList";
    import {user} from "../../store/module/user";

    export default {
        name: "teacher",
        mixins: [infoList],
        data() {
            const checkPhone = (rule, value, callback) => {
                const reg = /^1[3456789]\d{9}$/;
                if (!reg.test(value)) {
                    callback(new Error("请输入正确的手机号码"));
                } else {
                    callback();
                }
            };
            return {
                searchInfo: {
                    teacherName: '',
                    mobile: '',
                    createName: '',
                    currentRoleId: 0,
                    currentAreaId: 0,
                    auditStatus: ''
                },

                failMessage: '',
                auditMessageVisible: false,
                dialogImportVisible: false,
                saveFlag: true,
                certificationUrls: [],
                idCardUrls: [],
                headImgUrlFlag: false,
                btns: [],
                isFlag: false,
                path: process.env.VUE_APP_BASE_API,
                auditOptions: [],
                statusOptions: [
                    {
                        value: 0,
                        label: "否",
                    },
                    {
                        value: 1,
                        label: "是",
                    },
                ],
                roleOptions: [
                    {
                        value: 0,
                        label: "机构",
                    },
                    {
                        value: 1,
                        label: "学校",
                    },
                    {
                        value: 2,
                        label: "教育局",
                    },
                    {
                        value: 3,
                        label: "管理员",
                    },
                ],
                listApi: teacherList,
                dialogFormVisible: false,
                auditDialogFormVisible: false,
                dialogTitle: "新增教师",
                createUserName: '',
                form: {},
                auditForm: {
                    remarks: ''
                },
                type: "",
                rules1: {},
                rules: {
                    name: [{required: true, message: "请输入账户名称", trigger: "blur"}],
                    sex: [{required: true, message: "请选择性别", trigger: "blur"}],
                    role: [{required: true, message: "请选择角色", trigger: "change"}],
                    enabled: [
                        {required: true, message: "请选择启用状态", trigger: "change"},
                    ],
                    mobile: [
                        {required: true, message: "请输入手机号", trigger: "blur"},
                        {validator: checkPhone, trigger: "blur"},
                    ]

                },
            };
        },
        computed: {
            ...mapGetters("user", ["userInfo", "token"]),
        },
        methods: {
            handlePreview(file) {
            },
            handleExceed(files, fileList) {
                this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            closeImportDialog() {
                this.dialogImportVisible = false;
            },
            //导入框
            importInfo() {
                this.dialogImportVisible = true;
            },
            fliterColor(val) {
                switch (val) {
                    case 0:
                        return 'info'
                    case 1:
                        return 'warning'
                    case 2:
                        return 'danger'
                    case 3:
                        return 'success'
                    case 5:
                        return 'warning'
                    default:
                        break;
                }
            },
            filterStatus(val) {
                switch (val) {
                    case 0:
                        return '待审核'
                    case 1:
                        return '审核中'
                    case 2:
                        return '审核失败'
                    case 3:
                        return '审核成功'
                    case 4:
                        return '审核中'
                    default:
                        break;
                }
            },
            //条件搜索前端看此方法
            onSubmit() {
                this.page = 1;
                this.pageSize = 10;
                this.getTableData();
            },
            initForm() {
                this.$refs.areaForm.resetFields();
                this.form = {};
            },
            closeDialog() {
                this.initForm();
                this.dialogFormVisible = false;
            },
            closeAudiDialog() {
                this.auditDialogFormVisible = false;
            },
            //状态 启用/停用
            async changeEnable(row) {
                const res = await enableTeacher(row.teacherId)
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "启用/停用成功",
                        showClose: true,
                    });
                }
                this.getTableData();
            },
            //审核弹出框
            async openAudit(row) {
                this.auditForm = row
                this.auditDialogFormVisible = true;
            },
            //提交审核
            async commitAudit(row) {
                this.$confirm("此操作将提交审核, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await auditTeacher({
                            teacherId: row.teacherId,
                            auditStatus: 1
                        });
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "提交成功",
                                showClose: true,
                            });
                        }
                        this.getTableData();
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            //运营审核
            async enterAudiDialog(type) {
                this.auditForm = Object.assign(this.auditForm, {auditStatus: type})
                const {teacherId, remarks, auditStatus} = this.auditForm
                const res = await auditTeacher({teacherId, remarks, auditStatus});
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "提交成功",
                        showClose: true,
                    });
                }
                this.getTableData();
                this.auditDialogFormVisible = false;
            },
            openDialog(type, flag) {
                this.fullscreenLoading = false;
                switch (type) {
                    case "add":
                        this.headImgUrlFlag = false;
                        this.dialogTitle = "新增教师";
                        this.certificationUrls = [];
                        this.idCardUrls = [];
                        this.form.createName = this.createUserName;
                        break;
                    case "edit":
                        if (this.form.headImgUrl === '' || this.form.headImgUrl === undefined) {
                            this.headImgUrlFlag = false;
                        } else {
                            this.headImgUrlFlag = true;
                        }
                        if (flag) {
                            this.dialogTitle = "查看教师";
                        } else {
                            this.dialogTitle = "编辑教师";
                        }
                        break;
                    default:
                        break;
                }
                this.isFlag = flag
                this.type = type;
                this.dialogFormVisible = true;
            },
            //查看失败原因
            async showFailReason(val) {
                this.failMessage = "";
                this.auditMessageVisible = true;
                let res = await getAuditMessage(val);
                this.failMessage = res.data;
            },

            async handlePass(row, type) {
                const res = await teacherDetail(row.teacherId)
                this.forms = Object.assign(this.forms, res.data);
                // this.openDialogs(type);
            },
            async subPass(type, isPass) {
                this.$refs.areaForms.validate(async (valid) => {
                    if (valid) {
                        switch (type) {
                            case 1: {
                                this.forms = Object.assign(this.forms, {auditStatus: isPass})
                                const {teacherId, remarks, auditStatus} = this.forms
                                const res = await submitPass({teacherId, remarks, auditStatus});
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "提交成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }

                                break;
                            case 2: {
                                this.forms = Object.assign(this.forms, {auditStatus: isPass})
                                const {teacherId, auditStatus} = this.forms
                                const res = await auditTeacher({teacherId, auditStatus});
                                if (res.statusCode === 0) {
                                    this.$message({
                                        type: "success",
                                        message: "提交成功",
                                        showClose: true,
                                    });
                                }
                                this.getTableData();
                                this.closeDialog();
                            }
                                break;
                            default: {
                                this.$message({
                                    type: "error",
                                    message: "未知操作",
                                    showClose: true,
                                });
                            }
                                break;
                        }
                    }
                });
            },
            async editArea(row, flag) {
                this.certificationUrls = [];
                this.idCardUrls = [];
                const res = await teacherDetail(row.teacherId)
                this.form = res.data;
                //获取教师资格证集合
                let certificationUrl = res.data.certificationUrl;

                if (certificationUrl !== '') {
                    let certificationUrlArray = certificationUrl.split(";").filter(item => item != '');
                    certificationUrlArray.forEach((item) => {
                        this.certificationUrls.push({name: 'certificationUrl', url: item})
                    })
                }
                let idCardUrl = res.data.idCardUrl;
                if (idCardUrl !== '') {
                    let idCardUrlArray = idCardUrl.split(";").filter(item => item != '');
                    idCardUrlArray.forEach((item) => {
                        this.idCardUrls.push({name: 'idCardUrl', url: item})
                    })
                }
                this.openDialog("edit", flag);
            },
            async deleteAreas(row) {
                this.$confirm("此操作将永久删除该项, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                })
                    .then(async () => {
                        const res = await deleteteacher(row.teacherId);
                        if (res.statusCode === 0) {
                            this.$message({
                                type: "success",
                                message: "删除成功!",
                            });
                            this.getTableData();
                        }
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除",
                        });
                    });
            },
            async enterDialog() {
                this.$refs.areaForm.validate(async (valid) => {
                        //机构的时候特殊处理下
                        // if (this.searchInfo.currentRoleId === 3) {
                        //     let idCardUrlFlag = false;
                        //     if (this.form.idCardUrl !== undefined && this.form.idCardUrl !== '') {
                        //         this.$refs.areaForm.clearValidate('idCardUrl');
                        //         idCardUrlFlag = true;
                        //     }
                        //     let certificationUrlFlag = false;
                        //     if (this.form.certificationUrl !== undefined && this.form.certificationUrl !== '') {
                        //         this.$refs.areaForm.clearValidate('certificationUrl');
                        //         certificationUrlFlag = true;
                        //     }
                        //     if (idCardUrlFlag && certificationUrlFlag) {
                        //         valid = true;
                        //     }
                        // }
                        if (valid) {
                            switch (this.type) {
                                case "add": {
                                    const res = await addteacher(this.form);
                                    if (res.statusCode === 0) {
                                        this.$message({
                                            type: "success",
                                            message: "添加成功",
                                            showClose: true,
                                        });
                                    }
                                    this.getTableData();
                                    this.closeDialog();
                                }

                                    break;
                                case "edit": {
                                    const res = await editteacher(this.form);
                                    if (res.statusCode === 0) {
                                        this.$message({
                                            type: "success",
                                            message: "编辑成功",
                                            showClose: true,
                                        });
                                    }
                                    this.getTableData();
                                    this.closeDialog();
                                }
                                    break;
                                default: {
                                    this.$message({
                                        type: "error",
                                        message: "未知操作",
                                        showClose: true,
                                    });
                                }
                                    break;
                            }
                        }
                    }
                )
                ;
            },
            handleRemove(file, fileList, index) {
                if (index === 2) {
                    let idCardUrl = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.response.data;
                        idCardUrl = idCardUrl + url + ";";
                    });
                    if (fileList.length === 0) {
                        this.form.idCardUrl = '';
                    } else {
                        this.form.idCardUrl = idCardUrl;
                    }
                } else if (index === 3) {
                    let certificationUrl = '';
                    fileList.forEach(function (value, index, array) {
                        let url = value.response.data;
                        certificationUrl = certificationUrl + url + ";";
                    });
                    if (fileList.length === 0) {
                        this.form.certificationUrl = '';
                    } else {
                        this.form.certificationUrl = certificationUrl;
                    }
                }
            }
            ,
            //文件上传
            checkFile(file) {
                this.saveFlag = false;
                this.fullscreenLoading = true;
                const isJPG = file.type === "image/jpeg";
                const isPng = file.type === "image/png";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG && !isPng) {
                    this.$message.error("上传头像图片只能是 JPG或png 格式!");
                    this.fullscreenLoading = false;
                }
                if (!isLt2M) {
                    this.$message.error("上传头像图片大小不能超过 2MB!");
                    this.fullscreenLoading = false;
                }
                //判断身份证照片张数（最多两张）
                if (this.form.idCardUrl !== undefined && this.form.idCardUrl !== '') {
                    let idCardUrlArray = this.form.idCardUrl.split(";").filter(item => item != '');
                    if (idCardUrlArray.length > 2) {
                        this.$message.error("身份证照片数量不能超过两张!");
                        return false;
                    }
                }
                return (isPng || isJPG) && isLt2M;
            }
            ,
            uploadSuccess(res, file, fileList, index) {
                // this.fullscreenLoading = false;
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    this.saveFlag = true;
                    let idCardUrl = this.form.idCardUrl;
                    let certificationUrl = this.form.certificationUrl;
                    if (index === 2) {
                        if (idCardUrl === undefined || idCardUrl === '') {
                            this.form.idCardUrl = res.data
                        } else {
                            this.form.idCardUrl = idCardUrl + ";" + res.data
                        }
                    } else if (index === 3) {
                        if (certificationUrl === undefined || certificationUrl === '') {
                            this.form.certificationUrl = res.data;
                        } else {
                            this.form.certificationUrl = certificationUrl + ";" + res.data
                        }
                    }

                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            }
            ,

            uploadError() {
                this.saveFlag = true;
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
                this.fullscreenLoading = false;
            }
            ,
            //文件上传
            checkImportFile(file) {
                const isXls = file.type === "application/vnd.ms-excel";
                const isXlsx = file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isXls && !isXlsx) {
                    this.$message.error("文件格式错误!");
                }
                if (!isLt2M) {
                    this.$message.error("上传文件大小不能超过 2MB!");
                }
                return (isXls || isXlsx) && isLt2M;
            }
            ,
            uploadImportSuccess(res) {
                if (res.statusCode === 0) {
                    this.$message({
                        type: "success",
                        message: "上传成功",
                    });
                    this.dialogImportVisible = false;
                    this.getTableData();
                } else {
                    this.$message({
                        type: "warning",
                        message: res.msg,
                    });
                }
            }
            ,
            uploadImportError() {
                this.$message({
                    type: "error",
                    message: "上传失败",
                });
            }
            ,
        },
        created() {
            this.searchInfo.currentRoleId = this.userInfo.roleId;
            this.searchInfo.currentAreaId = this.userInfo.areaId;
            this.createUserName = this.userInfo.nickName;
            //管理员/运营人员/机构 才需要看的审批状态
            if (this.userInfo.roleId === 1 || this.userInfo.roleId === 2 || this.userInfo.roleId === 3) {
                this.auditOptions = [
                    {
                        value: '',
                        label: "全部",
                    },
                    {
                        value: 0,
                        label: "待审核",
                    },
                    {
                        value: 1,
                        label: "审核中",
                    },
                    {
                        value: 3,
                        label: "审核成功",
                    },
                    {
                        value: 2,
                        label: "审核失败",
                    }
                ]
            }
            // if (this.userInfo.roleId === 3) {
            //     this.rules = Object.assign(this.rules, {
            //         idCardUrl: [{required: true, message: "请上传身份证", trigger: "change"}],
            //         certificationUrl: [{required: true, message: "请上传教师资格证", trigger: "change"}]
            //     })
            // }
            this.btns = this.$route.meta.btnList
            this.getTableData()
        }
        ,
    }
    ;
</script>
<style scoped lang="scss">
    .info {
        color: #409EFF;
    }

    .warning {
        color: #E6A23C;
    }

    .success {
        color: #67c23a;
    }

    .danger {
        color: #f56c6c;
    }

    .button-box {
        // padding: 10px 20px;
        .el-button {
            float: right;
        }
    }

    .el-tag--mini {
        margin-left: 5px;
    }

    .dialogs {
        ::v-deep .el-input-group--append .el-input__inner {
            width: 170px !important;
        }

        ::v-deep .el-dialog__body {
            padding: 15px 20px 10px 20px;
        }

        ::v-deep .el-input__inner {
            width: 225px;
        }

        ::v-deep .el-textarea__inner {
            width: 225px;
        }

        .dialog-footer {
            text-align: center;
        }

        ::v-deep .el-input-number .el-input__inner {
            width: 130px;
        }

        ::v-deep .el-form .el-form-item {
            width: 49%;
            margin: 0;
        }

        ::v-deep .el-form .pics {
            width: 100%;
            margin-bottom: 22px;
        }

        ::v-deep .el-form .small_pic {
            .el-upload--picture-card {
                height: 80px;
                width: 80px;
                line-height: 80px;
            }
        }

        .pics {
            ::v-deep .el-form-item__content {
                width: calc(100% - 112px)
            }
        }

        .el-form .pics ::v-deep .el-form-item__content .el-textarea__inner {
            width: 100%;
        }
    }

    .header-background {
        position: absolute top 0 left 0 width 100% height 100% z-index -1
    }

</style>
